<template>
  <view class="box">
    <view class="header" @click="goPage(`/pages/shop/shopInfo`)">
      <image src="" class="img" mode="aspectFill" />
      <view class="right">
        <view class="t">
          <view class="left">
            <view class="tit">杭州一星啊哈哈大</view>
            <view class="line">
              <view class="label">金牌加盟商</view>
              <view>浏览量</view>
              <view style="margin: 0 8rpx">|</view>
              <view>商品40</view>
            </view>
          </view>
          <view class="btn">进店看看</view>
        </view>
        <view class="b">
          <view>医疗整形医院</view>
          <view>浦沿街道｜杭州市</view>
        </view>
      </view>
    </view>
    <view class="spBox">
      <view class="itemBox" v-for="(item, index) in 5" :key="index" @click="goPage('/pages/shop/xmDetails')">
        <image src="" class="" mode="aspectFill" />
        <view class="title">【热玛吉四代|面部|900发】</view>
        <view class="price">
          <view class="l">¥238</view>
          <view class="r">立省¥200</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
</script>
<style lang="less" scoped>
.box {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx 20rpx;
  .header {
    display: flex;
    align-items: center;
    .img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      background: salmon;
      margin-right: 24rpx;
    }
    .right {
      width: calc(100% - 120rpx);
      .b {
        font-size: 24rpx;
        color: #8a8a8d;
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;
      }
      .t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          .tit {
            font-size: 30rpx;
            color: #333333;
            margin-bottom: 10rpx;
          }
          .line {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #8a8a8d;
            .label {
              background: #fff0c3;
              border-radius: 8rpx;
              font-size: 24rpx;
              color: #563010;
              padding: 5rpx;
              margin-right: 8rpx;
            }
          }
        }
        .btn {
          background: #81d8d0;
          border-radius: 200rpx;
          padding: 8rpx 24rpx;
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
  }
  .spBox {
    width: 100%;
    overflow-x: auto;
    margin-top: 32rpx;
    gap: 20rpx;
    display: flex;
    flex-wrap: nowrap;
  }
  .itemBox {
    width: 196rpx;
    image {
      width: 196rpx;
      height: 148rpx;
      border-radius: 16rpx;
      background: #563010;
    }
    .title {
      font-size: 24rpx;
      color: #333333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 显示的行数，可以根据需要修改 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .price {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      justify-content: space-between;
      .l {
        font-size: 24rpx;
        color: #ea3b3b;
      }
      .r {
        font-size: 20rpx;
        color: #8a8a8d;
      }
    }
  }
}
</style>
